<template>
  <el-dialog :visible.sync="visible" v-dialogDrag title="查看系列周期日程" class="tl-dialog" width="750px" @open="open" @close="close" :append-to-body="true" :modal-append-to-body="true">
    <div style="padding-bottom:10px">
      <div>
        <el-alert :closable="false" type="warning" style="margin-bottom:10px" title="下方表格显示为本周期日程中所有的日程，点击表格后方的编辑/删除，可对某个日程进行单独修改，若要修改/删除整个周期日程，请使用右下角的编辑和删除按钮"> </el-alert>
        <!--表格渲染-->
        <el-table class="tl-table" ref="mainTable" height="300px" v-loading="loading" :data="datas" @selection-change="doSelectChange" @sort-change="doSortChange" @row-dblclick="doRowDbClick" row-key="id" border fit :row-class-name="doChangeRowClassName">
          <el-table-column prop="begintime" label="开始时间" width="140px" sortable="custom" sort-by="begintime" align="center" header-align="center" :formatter="dateTimeFormat"></el-table-column>
          <el-table-column prop="endtime" label="结束时间" width="140px" sortable="custom" sort-by="endtime" align="center" header-align="center" :formatter="dateTimeFormat"></el-table-column>
          <el-table-column prop="description" label="备注" min-width="150px" align="center" header-align="center"></el-table-column>
          <el-table-column label="状态" width="90px" align="center" header-align="center">
            <template slot-scope="scope">
              <el-tag size="small" v-if="new Date(scope.row.begintime) > new Date()" type="primary">未开始</el-tag>
              <el-tag size="small" v-else-if="new Date(scope.row.endtime) < new Date()" type="info">已结束</el-tag>
              <el-tag size="small" v-else type="success">进行中</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140px" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-edit" v-if="!readonly" @click="doEditSchedule(scope.row.id)">编辑</el-button>
              <el-button type="text" icon="el-icon-delete" v-if="!readonly" @click="doDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 列表分页 -->
        <el-row class="pagebar" ref="pager">
          <el-pagination @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
        </el-row>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="doCancelEdit" size="mini">取消</el-button>
      <el-button type="primary" @click="doEditTask" size="mini" v-if="!readonly">修改周期日程</el-button>
      <el-button type="danger" @click="doDeleteTask" size="mini" v-if="!readonly">删除该系列周期日程</el-button>
    </div>
    <tl-edit ref="editForm" @refresh="doRefresh" :ownerUser="ownerUser" @closeAll="closeAll"></tl-edit>
  </el-dialog>
</template>

<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
/** 子组件 */
/** 工具类 */
import { queryDataCode } from '@tapui/api/dataCode'
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
import { formatDate } from '@tapui/utils/date'
/** VUE配置 */
export default {
  name: 'TlWorkScheduleRef',
  components: { tlEdit: () => import('./edit.vue') },
  mixins: [mixin_list],
  data() {
    return {
      // 参照是否显示
      visible: false,
      tableHeight: '400px',
      urlPrefix: '/work/schedule/',
      // url配置
      url: {
        deleteTask: '/work/task/delete'
      },
      // 筛选参数
      filtersInfo: {},
      isQueryOnCreated: false,
      // 排序参数
      sorterInfo: {
        sidx: 'begintime',
        sord: 'asc'
      }
    }
  },
  props: {
    readonly: {
      default: false,
      type: Boolean
    },
    // 默认日程所属人
    ownerUser: {
      type: Object,
      default: function() {
        return {
          code: '',
          name: ''
        }
      }
    }
  },
  methods: {
    /** 打开对话框 */
    open() {
      this.loadData({})
    },
    /** 单个删除数据 */
    doDeleteTask() {
      this.$tap
        .confirm('确定删除该系列周期日程吗？删除后，该周期下所有日程都会删除！')
        .then((_) => {
          deleteAction(this.url.deleteTask, { ids: this.filtersInfo.qry_sourceid }).then((res) => {
            if (res.success) {
              this.$tap.message(res.message, 'success')
              this.$emit('closeAll')
              this.visible = false
            } else {
              this.$tap.alert(res.message, 'warning')
            }
          })
        })
        .catch((_) => {})
    },
    /** 删除后操作 */
    afterDoDelete(ids) {
      this.$emit('closeAll')
    },
    doEditTask() {
      this.$refs['editForm'].id = this.filtersInfo.qry_sourceid
      this.$refs['editForm'].isEditPeriod = true
      this.$refs['editForm'].url.load = this.$refs['editForm'].url.loadTask
      this.openEditDialog('editForm', this.filtersInfo.qry_sourceid)
    },
    doEditSchedule(id) {
      this.$refs['editForm'].id = id
      this.$refs['editForm'].isEditPeriod = false
      this.$refs['editForm'].url.load = this.$refs['editForm'].url.loadSchedule
      this.$refs['editForm'].isHiddenPeriod = true
      this.openEditDialog('editForm', id)
    },
    closeAll() {
      this.visible = false
      this.$emit('closeAll')
    },
    /** 取消 */
    doCancelEdit() {
      this.visible = false
    },
    /** 格式化日期 yyyy-MM-dd HH:mm:ss */
    dateTimeFormat(row, column, cellValue, index) {
      let dateValue = row[column.property]
      if (dateValue && dateValue.length > 0) {
        return formatDate(new Date(dateValue.replace(new RegExp(/-/gm), '/')), 'yyyy-MM-dd HH:mm')
      } else {
        return ''
      }
    },
    /** 刷新,页号不变*/
    doRefresh() {
      this.loadData({})
      this.$emit('refresh')
    },
    /** 页面关闭时执行 */
    close() {}
  }
}
</script>
